<template>
  <div class="schedules">
    <ul>
      <transition-group
        name="animate__animated animate__bounce"
        enter-active-class="animate__fadeInLeft"
        leave-active-class="animate__fadeInLeft"
        mode="in-out"
        appear
      >
        <li v-for="item in filmsSchedules" :key="item.scheduleId">
          <div class="time">
            <span class="top" v-show="item.showAt" :class="{ activeColor: !item.isOnsell }">{{
              (item.showAt * 1000) | getFormateTime('HH:mm')
            }}</span>
            <span class="bottom" v-show="item.endAt" :class="{ activeColor: !item.isOnsell }"
              >{{ (item.endAt * 1000) | getFormateTime('HH:mm') }}散场</span
            >
          </div>
          <div class="address">
            <span class="top" :class="{ activeColor: !item.isOnsell }">{{ item.filmLanguage }}{{ item.imagery }}</span>
            <span class="bottom" :class="{ activeColor: !item.isOnsell }">{{ item.hallName }}</span>
          </div>
          <div class="price" :class="{ activeColor: !item.isOnsell }">
            <p>{{ item.salePrice | getSalePrice }}</p>
          </div>
          <div class="buybox">
            <buy-box :activeColor="!item.isOnsell ? '#d2d6dc' : '#ff5f16'">{{
              item.isOnsell ? '购买' : '停售'
            }}</buy-box>
          </div>
        </li>
      </transition-group>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SchedulesList',
  props: ['filmsSchedules'],
  computed: {}
}
</script>

<style lang="scss" scoped>
.schedules {
  background: #fff;
  width: 100%;
  li {
    border-top: 0.5px solid #eee;
    display: flex;
    padding: 0.15rem;
    font-size: 0.15rem;
    .time,
    .address,
    .price,
    .buybox {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }
    .time {
      width: 1rem;
    }
    .address {
      font-size: 0.13rem;
    }
    .price {
      color: #ff5f16;
      flex: 2;
      align-items: center !important;
    }
    .buybox {
      flex: 2;
      align-items: center !important;
    }
    .top {
      font-size: 15px;
      color: #191a1b;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .bottom {
      font-size: 0.13rem;
      color: #797d82;
      margin-top: 0.1rem;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 1.35rem;
    }
  }
}

.activeColor {
  color: #d2d6dc !important;
}
</style>